<template>
  <div id="resourceManagement">
    <div id="tabelTitle">
      学员管理
    </div>
    <div id="table">
      <avue-crud
        v-model="form"
        :search.sync="searchForm"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="getList"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-update="handleUpdate"
        @row-save="handleSave"
        @row-del="rowDel"
        @selection-change="selectionChange"
      >
        <template slot-scope="{disabled,size}" slot="stuNameSearch">
          <div class="inputStyle">
            <el-input placeholder="请输入姓名或手机号" :disabled="disabled" :size="size" style="width:50%; "
                      v-model="searchForm.keyWord"></el-input>
          </div>
        </template>

        <template slot="menu" slot-scope="{row,size}">
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link" style="font-size: 12px;  color: #409EFF;margin-left: 20px">操作<i class="el-icon-arrow-down el-icon--right"></i></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="beforeHandleCommand('a',row.stuId)">转班</el-dropdown-item>
              <el-dropdown-item :command="beforeHandleCommand('b',row.stuId)">休学</el-dropdown-item>
              <el-dropdown-item :command="beforeHandleCommand('c',row.stuId)">退学</el-dropdown-item>
              <el-dropdown-item :command="beforeHandleCommand('d',row.stuId)">跟踪记录</el-dropdown-item>
              <el-dropdown-item  v-if="row.isApply==0" :command="beforeHandleCommand('e',row.stuId)">缴费信息申请</el-dropdown-item>
              <el-dropdown-item v-else :command="beforeHandleCommand('f',row.stuId,row.stuName,row)">缴费信息查看</el-dropdown-item>

            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </avue-crud>
    </div>
    <el-dialog
      :title="formTitle"

      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <avue-form ref="formForm" v-if="dialogVisible" v-model="formForm" :option="formOption"
                 @reset-change="emptytChange">
        <template slot="menuForm">
          <el-button icon="el-icon-delete" @click="dialogVisible = false">取消</el-button>
          <el-button icon="el-icon-delete" @click="handleEmpty">清 空</el-button>
          <el-button icon="el-icon-user" type="primary" @click="handleSubmit">提 交</el-button>
        </template>

      </avue-form>
      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>

    <!--    跟踪记录-->
    <trackingRecord ref="trackingRecord"/>
    <paymentSQ ref="paymentSQ"/>
    <paymentCK ref="paymentCK"/>
  </div>
</template>

<script>
import tableMixins from "@/mixins/tableMixin.vue"
import trackingRecord from './components/trackingRecord'
import paymentSQ from './components/paymentSQ'
import paymentCK from './components/paymentCK'

export default {
  name: "studentManagement",
  mixins: [tableMixins],
  components: {trackingRecord, paymentSQ, paymentCK},
  data() {
    return {
      form: {},
      data: [],
      //访问接口前缀
      url: "yuanjiu.testnew/tn-student",
      searchForm: {},
      // 表格参数
      tableOption: {
        labelWidth:200,
        searchSpan:6,
        border: true,
        index: false,
        indexLabel: '序号',
        indexWidth: 50,
        stripe: true,
        align: 'center',
        searchMenuSpan:10,
        // searchLabelWidth: 100,
        calcHeight: 300,
        dialogWidth: 900,
        menuWidth: 200,
        menu: true,
        menuAlign: 'center',
        refreshBtn: false,
        columnBtn: false,
        searchShowBtn: false,
        selection: true,
        rowKey: "id",
        addBtn: false,
        emptyBtn: true,
        editBtn: true,
        viewBtn: true,
        delBtn: false,
        emptyBtnText: "重置",
        editBtnText: "修改",
        maxHeight: 645000,
        searchSize: "medium",
        column: [
          {
            prop: 'stuName',
            label: '姓名',
            search: true,
            searchLabelWidth: '50',
          },
          {
            prop: 'sexCd',
            label: '性别',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            dicData: [{
              name: '男',
              code: 1
            }, {
              name: '女',
              code: 2
            }],
          },
          {
            prop: 'age',
            label: '年龄',
            hide: true,
          },
          {
            prop: 'phoneNum',
            label: '手机号',
          },
          {
            prop: 'productId',
            label: '培训类别',
            search: true,
            searchLabelWidth: '80',
            type: 'select',
            dicUrl: '/yuanjiu.testnew/tn-product/listTnProduct',
            dicMethod: 'post',
            props: {
              label: 'productName',
              value: 'productId',
              res: 'result'
            },
          },

          {
            prop: 'school',
            label: '学校',
            hide: true
          },
          {
            prop: 'major',
            label: '专业',
          },
          {
            prop: 'education',
            label: '学历',
          },
          {
            prop: 'sourceCode',
            label: '来源途径',
            hide: true,
            type: "select",
            dicUrl: '/yuanjiu.testnew/yj-config/getConfigByCode?itmCode=SOURCE_CODE',
            props: {
              label: "itmName",
              value: "itmVal",
              res: "result"
            },
          },
          {
            prop: 'chanelCode',
            label: '渠道',
            hide: true,
            type: "select",
            dicUrl: '/yuanjiu.testnew/yj-config/getConfigByCode?itmCode=CHANEL_CODE',
            props: {
              label: "itmName",
              value: "itmVal",
              res: "result"
            },
            rules: [{
              required: true,
              message: "请选择渠道",
              trigger: "change"
            }]
          },
          {
            prop: 'qq',
            label: '学员QQ',
            hide: true
          },
          {
            prop: 'wechat',
            label: '学员微信',
            hide: true
          },
          {
            prop: 'contactAddr',
            label: '联系地址',
            hide: true
          },
          {
            prop: 'mailAddr',
            label: '学员邮箱',
            hide: true
          },
          {
            label: "班级名称",
            prop: "classId",
            search: true,
            searchLabelWidth: '80',
            type: "select",
            dicUrl: '/yuanjiu.testnew/tn-class/listTnClass',
            dicMethod: 'post',
            props: {
              label: 'className',
              value: 'classId',
              res: 'result'
            },
            // rules: [{
            //   required: true,
            //   message: "请选择类型",
            //   trigger: "change"
            // }],
            filterable: true
          },
          {
            prop: 'status',
            label: '状态',
            type: "select",
            search: true,
            searchLabelWidth: '50',
            dicUrl: '/yuanjiu.testnew/yj-config/getConfigByCode?itmCode=STU_STATUS',
            props: {
              label: "itmName",
              value: "itmVal",
              res: "result"
            }
          },
          {
            prop: 'major',
            label: '咨询师',
            editDisplay: false
          },
          {
            prop: 'createTime',
            label: '招生时间',
            editDisplay: false,
          },
        ]
      },
      addUrl: "insertOrUpdate",
      listUrl: 'pageTnStudent',
      distributionList: [],
      //表单
      formTitle: "",
      formForm: {},
      dialogVisible: false,
      obj: {},
      formOption: {
        emptyBtn: false,
        submitBtn: false,
        column: []
      },
      changeList: [],
      stuId:""
    }
  },
  methods: {


    selectionChange(list) {
      this.changeList = []
      list.forEach((x) => {
        this.changeList = x.stuId
      })
      // console.log(this.changeList, 'changeList')
    },
    emptytChange() {
    },
    /**
     * @author isaac 2021/12/29
     * @param arguments
     * 关闭弹窗
     */
    handleClose() {
      this.dialogVisible = false;
    },
    handleEmpty(type,) {
      this.$refs.formForm.resetForm();
    },
    handleSubmit() {
      this.$refs.formForm.validate((vaild, done) => {
        if (vaild) {
          let url = ''
          this.formForm.stuId = this.stuId
          if (this.type == '1') {
            url = '/yuanjiu.testnew/tn-student/trans-class'
          }
          if (this.type == '2') {
            this.formForm.recTime01 = this.formForm.daterange[0]
            this.formForm.recTime02 = this.formForm.daterange[1]
            url = '/yuanjiu.testnew/tn-student/pause-studies'
          }
          if (this.type == '3') {
            url = '/yuanjiu.testnew/tn-student/leave-school'
            this.formForm.recTime01 = this.formForm.date
          }

          this.$httpService.post("" + url, this.formForm).then(res => {
            // console.log('res', res)
            this.$message.success("操作成功")
            this.formForm={}
            this.dialogVisible = false
          })
          setTimeout(() => {
            done()
          }, 2000)
        }
      })
    },

    beforeHandleCommand(command, stuId,stuName,row) {
      return {
        'stuId': stuId,
        'command': command,
        'stuName':stuName,
        'row':row
      }
    },
    changeA() {
      this.formTitle = '转班'
      this.formOption.column = [
        {
          label: "培训类型",
          prop: "productName",
          type: "select",
          span: 24,
          dicUrl: '/yuanjiu.testnew/tn-product/listTnProduct',
          dicMethod: 'post',
          props: {
            label: 'productName',
            value: 'productId',
            res: 'result'
          },
          rules: [{
            required: true,
            message: "请选择类型",
            trigger: "change"
          }],
          filterable: true
        },
        {
          label: "班级名称",
          prop: "classId",
          type: "select",
          span: 24,
          dicUrl: '/yuanjiu.testnew/tn-class/listTnClass',
          dicMethod: 'post',
          props: {
            label: 'className',
            value: 'classId',
            res: 'result'
          },
          rules: [{
            required: true,
            message: "请选择类型",
            trigger: "change"
          }],
          filterable: true
        }]
      this.dialogVisible = true
    },
    changeB() {
      this.formTitle = '休学'
      this.formOption.column = [
        {
          label: "日期范围",
          prop: "daterange",
          type: "daterange",
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd',
          startPlaceholder: '开始休学时间',
          endPlaceholder: '结束休学时间',
          span: 24,
          rules: [{
            required: true,
            message: "请选择休学开始日期",
            trigger: "change"
          }],
        },
        {
          label: "休学原因",
          prop: "recordReason",
          type: "textarea",
          span: 24,
          dicUrl: '',
          rules: [{
            required: true,
            message: "请输入休学原因",
            trigger: "blur"
          }],
        }]
      this.dialogVisible = true
    },
    changeC() {
      this.formTitle = '退学'
      this.formOption.column = [
        {
          label: "日期",
          prop: "date",
          type: "date",
          span: 24,
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd',
          mock: {
            type: 'datetime',
            format: 'yyyy-MM-dd'
          },
          rules: [{
            required: true,
            message: "请选择退学开始日期",
            trigger: "change"
          }],
        },
        {
          label: "退学原因",
          prop: "recordReason",
          type: "textarea",
          span: 24,
          rules: [{
            required: true,
            message: "请输入退学原因",
            trigger: "blur"
          }],
        }]
      this.dialogVisible = true
    },
    handleCommand(v) {
      this.stuId =v.stuId
      switch (v.command) {
        case 'a' :
          this.type = 1
          this.changeA()
          break;
        case 'b' :
          this.type = 2
          this.changeB()
          break;
        case 'c' :
          this.type = 3
          this.changeC()
          break;
        case 'd' :
          //跟踪记录
          this.$refs.trackingRecord.openDialog(v.stuId)
          break;
        case 'e' :
          //缴费信息申请
          this.$refs.paymentSQ.openDialog(v.stuId)
          break;
        case 'f' :
          //缴费信息查看
          this.$refs.paymentCK.openDialog(v.stuId,v.stuName,v.row)
          break;
      }
    }
  }
}
</script>

<style scoped>
.inputStyle{
  width: 600px;
}
@media only screen and (max-width: 1600px){
  .inputStyle{
    width: 530px;
  }
}
@media only screen and (max-width: 1500px){
  .inputStyle{
    width: 430px;
  }
}
@media only screen and (max-width: 1366px){
  .inputStyle{
    width: 330px;
  }
}
@media only screen and (max-width: 900px){
  .inputStyle{
    width: 600px;
  }
}

</style>
